React useState: State Hook'ini Optimallashtirish va Eng Yaxshi Amaliyotlar

useState hook'i React'dagi funksional komponentlarda holatni boshqarishning asosiy tamal toshidir. Garchi foydalanish oson bo'lsa-da, noto'g'ri ishlash, ayniqsa murakkab ilovalarda, ishlashda qiyinchiliklar va kutilmagan xatti-harakatlarga olib kelishi mumkin. Ushbu qo'llanma useState'ni optimallashtirish usullari va eng yaxshi amaliyotlarini keng qamrovli o'rganishni taqdim etadi, bu sizning React ilovalaringizning global auditoriya uchun samarali, qo'llab-quvvatlanadigan va kengaytiriladigan bo'lishini ta'minlaydi.

useState Asoslarini Tushunish

Optimallashtirishga kirishishdan oldin, keling, asoslarni tezda takrorlab olaylik. useState hook'i funksional komponentlarga holat qo'shish imkonini beradi. U boshlang'ich holat qiymatini argument sifatida qabul qiladi va joriy holat hamda uni yangilash uchun funksiyani o'z ichiga olgan massivni qaytaradi.

Misol:

            import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Ushbu misolda count joriy holat qiymatini saqlaydi va setCount uni yangilash uchun ishlatiladigan funksiyadir. Tugmani bosish hisobni oshiradi.

useState Bilan Bog'liq Umumiy Xatolar va Samaradorlik Muammolari

Oddiy ko'rinishiga qaramay, agar ehtiyotkorlik bilan ishlatilmasa, useState samaradorlik muammolarini keltirib chiqarishi mumkin. Quyida ba'zi umumiy xatolar keltirilgan:

• Keraksiz qayta renderlar: Eng ko'p uchraydigan muammo, komponentlar ularning prop'lari o'zgarmagan bo'lsa ham qayta render bo'lganda yuzaga keladi. Bu holat tez-tez yangilanganda yoki yangilanishlar bola komponentlarda keraksiz qayta renderlarni keltirib chiqarganda sodir bo'lishi mumkin.
• Holatni to'g'ridan-to'g'ri o'zgartirish: Holatni to'g'ridan-to'g'ri o'zgartirish (masalan, state.property = newValue) React'ning yangilanish mexanizmini chetlab o'tadi va kutilmagan xatti-harakatlarga olib kelishi mumkin. Har doim useState tomonidan taqdim etilgan holatni yangilash funksiyasidan foydalaning.
• Murakkab holat yangilanishlari: Holatni yangilash funksiyasi ichida qimmat hisob-kitoblarni yoki murakkab o'zgartirishlarni bajarish ilovangizni sekinlashtirishi mumkin.
• Noto'g'ri boshlang'ich holat: Noto'g'ri yoki yomon ishga tushirilgan boshlang'ich holatni taqdim etish keyinchalik xatolarga va kutilmagan xatti-harakatlarga olib kelishi mumkin.

useState uchun Optimallashtirish Usullari

Endi, keling, bu muammolarni yumshatish va React ilovalaringizning samaradorligini oshirish uchun turli xil optimallashtirish usullarini ko'rib chiqaylik:

1. Funksional Yangilanishlardan Foydalanish

Holatni uning oldingi qiymatiga asoslanib yangilayotganda, holatni yangilash funksiyasining funksional shaklidan foydalaning. Bu, ayniqsa, asinxron stsenariylarda yoki bir nechta yangilanishlar birgalikda to'planganda, eng so'nggi holat bilan ishlayotganingizni ta'minlaydi.

Misol (Noto'g'ri):

            function IncorrectComponent() {
  const [count, setCount] = useState(0);

  const incrementTwice = () => {
    setCount(count + 1);
    setCount(count + 1); // Potentially incorrect: relies on stale `count` value
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementTwice}>Increment Twice</button>
    </div>
  );
}

            

              
                Copy
              
            
          

Misol (To'g'ri):

            function CorrectComponent() {
  const [count, setCount] = useState(0);

  const incrementTwice = () => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1); // Correct: uses the previous state for each update
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementTwice}>Increment Twice</button>
    </div>
  );
}

            

              
                Copy
              
            
          

To'g'ri misolda, holatni yangilash funksiyasi oldingi holatni argument sifatida (prevCount) qabul qiladi, bu sizga vaqt yoki paketlashdan qat'i nazar, aniq yangilanishlarni amalga oshirish imkonini beradi.

2. O'zgarmaslik Muhimdir

Holatni hech qachon to'g'ridan-to'g'ri o'zgartirmang. Yangilashda har doim holat ob'ekti yoki massivining yangi nusxasini yarating. Bu React'ning o'zgarishlarni samarali aniqlashini va faqat kerak bo'lganda qayta renderlarni ishga tushirishini ta'minlaydi.

Misol (Noto'g'ri - To'g'ridan-to'g'ri o'zgartirish):

            function IncorrectObjectComponent() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateName = () => {
    user.name = 'Jane'; // Direct mutation: Avoid this!
    setUser(user); // React might not detect the change
  };

  return (
    <div>
      <p>Name: {user.name}, Age: {user.age}</p>
      <button onClick={updateName}>Update Name</button>
    </div>
  );
}

            

              
                Copy
              
            
          

Misol (To'g'ri - O'zgarmaslikdan foydalanish):

            function CorrectObjectComponent() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateName = () => {
    setUser({ ...user, name: 'Jane' }); // Create a new object with the updated name
  };

  return (
    <div>
      <p>Name: {user.name}, Age: {user.age}</p>
      <button onClick={updateName}>Update Name</button>
    </div>
  );
}

            

              
                Copy
              
            
          

To'g'ri misolda, spread operatori (...) user ob'ektining sayoz nusxasini yaratadi, bu setUser yangi ob'ektni qabul qilishini va qayta renderlashni ishga tushirishini ta'minlaydi.

3. Keraksiz Qayta Renderlardan Qochish uchun useMemo'dan Foydalanish

useMemo hook'i qimmat hisob-kitoblar yoki ob'ekt yaratish natijalarini memoizatsiya qilish (keshlash) uchun ishlatilishi mumkin. Bu hisob-kitoblarning har bir qayta renderda keraksiz ravishda qayta bajarilishining oldini oladi.

Misol:

            import React, { useState, useMemo } from 'react';

function ExpensiveCalculationComponent() {
  const [count, setCount] = useState(0);

  // Simulate an expensive calculation
  const expensiveValue = useMemo(() => {
    console.log('Performing expensive calculation...');
    let result = 0;
    for (let i = 0; i < 100000000; i++) {
      result += i;
    }
    return result;
  }, []); // Empty dependency array: only calculate once on initial render

  return (
    <div>
      <p>Count: {count}</p>
      <p>Expensive Value: {expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
    </div>
  );
}

            

              
                Copy
              
            
          

Ushbu misolda expensiveValue faqat komponent birinchi marta render qilinganda bir marta hisoblanadi. Keyingi qayta renderlar (count holatining yangilanishi bilan ishga tushirilgan) qimmat hisob-kitoblardan qochib, keshlangan qiymatdan foydalanadi.

4. Voqea Ishlovchilarini Eslab Qolish uchun useCallback

Voqea ishlovchi funksiyalarni bola komponentlarga prop'lar sifatida uzatishda, funksiyani memoizatsiya qilish uchun useCallback'dan foydalaning. Bu ota-ona komponenti qayta render qilinganda bola komponentining keraksiz ravishda qayta render qilinishining oldini oladi.

Misol:

            import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  // Memoize the increment function using useCallback
  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]); // Dependency array: re-create the function only when 'count' changes

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={increment} />
    </div>
  );
}

// Assuming ChildComponent is memoized using React.memo
const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent re-rendered!');
  return <button onClick={onClick}>Increment (Child)</button>;
});

            

              
                Copy
              
            
          

Ushbu misolda useCallback increment funksiyasini memoizatsiya qiladi, bu count qiymati (va shuning uchun increment funksiyasi) o'zgarmaguncha ChildComponent'ning qayta render qilinishining oldini oladi.

5. Holatni Kichikroq, Mustaqil Qismlarga Ajratish

Agar komponentingizda katta va murakkab holat ob'ekti bo'lsa, uni bir nechta useState hook'laridan foydalanib, kichikroq, mustaqil holat qismlariga bo'lishni o'ylab ko'ring. Bu React'ga faqat o'zgargan holatga bog'liq bo'lgan komponentning ma'lum qismlarinigina yangilash imkonini beradi va keraksiz qayta renderlarni kamaytiradi.

Misol (Oldin - Katta Holat Ob'ekti):

            function LargeStateComponent() {
  const [state, setState] = useState({
    name: 'John',
    age: 30,
    city: 'New York',
    country: 'USA'
  });

  const updateName = () => {
    setState({ ...state, name: 'Jane' });
  };

  const updateAge = () => {
    setState({ ...state, age: 31 });
  };

  return (
    <div>
      <p>Name: {state.name}</p>
      <p>Age: {state.age}</p>
      <p>City: {state.city}</p>
      <p>Country: {state.country}</p>
      <button onClick={updateName}>Update Name</button>
      <button onClick={updateAge}>Update Age</button>
    </div>
  );
}

            

              
                Copy
              
            
          

Misol (Keyin - Holatni Ajratish):

            function SplitStateComponent() {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(30);
  const [city, setCity] = useState('New York');
  const [country, setCountry] = useState('USA');

  const updateName = () => {
    setName('Jane');
  };

  const updateAge = () => {
    setAge(31);
  };

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>City: {city}</p>
      <p>Country: {country}</p>
      <button onClick={updateName}>Update Name</button>
      <button onClick={updateAge}>Update Age</button>
    </div>
  );
}

            

              
                Copy
              
            
          

Holatni alohida useState hook'lariga bo'lish orqali, name'ni yangilash faqat name holatiga bog'liq bo'lgan komponent qismlarining qayta render qilinishiga olib keladi va samaradorlikni oshiradi.

6. Qimmat Boshlang'ich Holat uchun "Dangasa" Ishga Tushirish

Agar boshlang'ich holatni hisoblash hisoblash jihatidan qimmat bo'lsa, useState'ning "dangasa" ishga tushirish xususiyatidan foydalaning. Boshlang'ich qiymatni to'g'ridan-to'g'ri taqdim etish o'rniga, boshlang'ich qiymatni qaytaradigan funksiyani uzatishingiz mumkin. Bu funksiya faqat bir marta, birinchi render paytida bajariladi.

Misol:

            import React, { useState } from 'react';

function LazyInitializationComponent() {
  // Expensive function to calculate initial state
  const expensiveInitialState = () => {
    console.log('Calculating initial state...');
    let result = 0;
    for (let i = 0; i < 100000000; i++) {
      result += i;
    }
    return result;
  };

  const [value, setValue] = useState(expensiveInitialState);

  return (
    <div>
      <p>Value: {value}</p>
      <button onClick={() => setValue(value + 1)}>Increment</button>
    </div>
  );
}

            

              
                Copy
              
            
          

Ushbu misolda expensiveInitialState funksiyasi faqat komponent o'rnatilganda bir marta bajariladi. Agar siz expensiveInitialState() natijasini to'g'ridan-to'g'ri useState'ga uzatgan bo'lsangiz, u har bir qayta renderda bajarilgan bo'lardi, garchi boshlang'ich holatni faqat bir marta hisoblash kerak bo'lsa ham.

7. Murakkab Holat Logikasi uchun useReducer'dan Foydalanish

Bir nechta kichik qiymatlarni yoki murakkab holat o'tishlarini o'z ichiga olgan murakkab holat logikasiga ega komponentlar uchun useState o'rniga useReducer hook'idan foydalanishni o'ylab ko'ring. useReducer holatni boshqarish uchun, ayniqsa, bog'liq holat yangilanishlari bilan ishlashda, yanada tuzilgan va bashorat qilinadigan usulni taqdim etadi.

Misol:

            import React, { useReducer } from 'react';

// Define the reducer function
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'RESET':
      return { ...state, count: 0 };
    default:
      return state;
  }
};

// Initial state
const initialState = { count: 0 };

function ReducerComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
      <button onClick={() => dispatch({ type: 'RESET' })}>Reset</button>
    </div>
  );
}

            

              
                Copy
              
            
          

Ushbu misolda useReducer count holatini boshqaradi va turli harakatlarga asoslangan holat yangilanishlarini ishga tushirish uchun dispatch funksiyasini taqdim etadi. Ushbu yondashuv, ayniqsa, bir nechta bog'liq yangilanishlar yoki murakkab o'tishlar bilan holatni boshqarishda foydalidir.

8. Funksional Komponentlarni Eslab Qolish uchun React.memo

Prop'lar o'zgarmaganida qayta renderlarning oldini olish uchun funksional komponentlaringizni React.memo bilan o'rang. React.memo prop'larni sayoz taqqoslashni amalga oshiradi va faqat prop'lar boshqacha bo'lsa komponentni qayta render qiladi.

Misol:

            import React from 'react';

// Memoize the component using React.memo
const MyMemoizedComponent = React.memo(({ data }) => {
  console.log('MyMemoizedComponent re-rendered!');
  return <p>Data: {data}</p>;
});

            

              
                Copy
              
            
          

React.memo, ayniqsa, statik yoki kamdan-kam o'zgaradigan prop'larga ega tez-tez qayta render qilinadigan komponentlar uchun samaradorlikni sezilarli darajada oshirishi mumkin.

Global Kontekstda useState uchun Eng Yaxshi Amaliyotlar

Global auditoriya uchun React ilovalarini ishlab chiqishda ushbu qo'shimcha eng yaxshi amaliyotlarni hisobga oling:

• Internatsionalizatsiya (i18n): Tarjimalarni boshqarish va ilovangiz interfeysini turli tillar va mahalliy sozlamalarga moslashtirish uchun react-intl yoki i18next kabi kutubxonadan foydalaning. Joriy mahalliy sozlamalar bilan bog'liq holat matn va raqamlarning izchil va to'g'ri ko'rsatilishini ta'minlash uchun ehtiyotkorlik bilan boshqarilishi kerak. Masalan, sanalar, valyutalar va raqam formatlari dunyo bo'ylab juda farq qiladi.
• Lokalizatsiya (l10n): Ma'lumotlarni ko'rsatishda turli madaniy an'analarni hisobga oling. Masalan, sana formatlari farqlanadi (MM/DD/YYYY va DD/MM/YYYY) va valyuta belgilari har bir mamlakat uchun har xil (€, $, ¥). Ushbu sozlamalar bilan bog'liq holat lokalizatsiya qilinishi kerak.
• O'ngdan-Chapga (RTL) Maketlar: Ilovangiz arab va ibroniy kabi RTL tillarni qo'llab-quvvatlashiga ishonch hosil qiling. Maketni akslantirishni boshqarish uchun CSS mantiqiy xususiyatlaridan (masalan, margin-left o'rniga margin-inline-start) va rtlcss kabi kutubxonalardan foydalaning. Agar kerak bo'lsa, maket yo'nalishini holat yordamida boshqaring.
• Vaqt Mintaqalari: Sanalar va vaqtlar bilan ishlashda vaqt mintaqalariga e'tibor bering. Vaqt mintaqalarini o'zgartirishni boshqarish va vaqtni foydalanuvchining mahalliy vaqt mintaqasida ko'rsatish uchun moment-timezone yoki date-fns-timezone kabi kutubxonadan foydalaning. Foydalanuvchining joriy vaqt mintaqasi holatda saqlanishi va ularning joylashuviga qarab yangilanishi mumkin.
• Maxsus Imkoniyatlar (a11y): Ilovangizni WCAG ko'rsatmalariga rioya qilgan holda maxsus imkoniyatlarni hisobga olib loyihalashtiring. Komponentlaringizning nogironlar, shu jumladan ekran o'quvchilari yoki yordamchi texnologiyalardan foydalanadiganlar uchun foydalanishga yaroqli ekanligiga ishonch hosil qiling. Masalan, barcha forma elementlarida yorliqlar borligiga ishonch hosil qiling va rasmlar uchun muqobil matn taqdim eting. Umumiy maxsus imkoniyatlar muammolarini aniqlash uchun eslint-plugin-jsx-a11y kabi linterdan foydalanishni o'ylab ko'ring.

Amaliy Misollar va Qo'llash Holatlari

Keling, ushbu optimallashtirish usullarini real hayotiy stsenariylarda qanday qo'llash mumkinligini ko'rib chiqamiz:

1. Qidiruv Komponentini Optimallashtirish

Foydalanuvchi kiritishiga asoslangan holda katta ro'yxatdagi elementlarni filtrlaydigan qidiruv komponentini ko'rib chiqing. Ushbu komponentni optimallashtirish uchun filtrlangan ro'yxatni memoizatsiya qilish uchun useMemo'dan va qidiruv ishlovchisini memoizatsiya qilish uchun useCallback'dan foydalanishingiz mumkin.

            import React, { useState, useMemo, useCallback } from 'react';

function SearchComponent({ items }) {
  const [searchTerm, setSearchTerm] = useState('');

  // Memoize the filtered list
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item =>
      item.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [items, searchTerm]);

  // Memoize the search handler
  const handleSearch = useCallback(event => {
    setSearchTerm(event.target.value);
  }, []);

  return (
    <div>
      <input type="text" placeholder="Search..." onChange={handleSearch} />
      <ul>
        {filteredItems.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

            

              
                Copy
              
            
          

Ushbu misolda filteredItems faqat items yoki searchTerm o'zgarganda qayta hisoblanadi. handleSearch funksiyasi memoizatsiya qilingan bo'lib, bola komponentlarning keraksiz qayta render qilinishining oldini oladi.

2. Forma Komponentini Optimallashtirish

Formalar ko'pincha bir nechta holat yangilanishlari va tekshiruvlarni o'z ichiga oladi. Forma komponentini optimallashtirish uchun forma holatini boshqarish uchun useReducer'dan va formani yuborish ishlovchisini memoizatsiya qilish uchun useCallback'dan foydalaning.

            import React, { useReducer, useCallback } from 'react';

// Define the reducer function
const formReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return { ...state, [action.field]: action.value };
    case 'SUBMIT':
      // Perform validation here
      return state;
    default:
      return state;
  }
};

// Initial state
const initialFormState = {
  name: '',
  email: '',
  message: ''
};

function FormComponent() {
  const [state, dispatch] = useReducer(formReducer, initialFormState);

  // Memoize the form submission handler
  const handleSubmit = useCallback(event => {
    event.preventDefault();
    dispatch({ type: 'SUBMIT' });
    console.log('Form submitted:', state);
  }, [state]);

  const handleChange = (event) => {
    dispatch({ type: 'UPDATE_FIELD', field: event.target.name, value: event.target.value });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" value={state.name} onChange={handleChange} />
      </label>
      <label>
        Email:
        <input type="email" name="email" value={state.email} onChange={handleChange} />
      </label>
      <label>
        Message:
        <textarea name="message" value={state.message} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

            

              
                Copy
              
            
          

Ushbu misolda useReducer forma holatini boshqaradi va useCallback handleSubmit funksiyasini memoizatsiya qiladi. Bu, ayniqsa, murakkab tekshiruvlar yoki asinxron operatsiyalar bilan ishlashda forma komponentining samaradorligini oshirishga yordam beradi.

Xulosa

useState hook'i funksional React komponentlarida holatni boshqarish uchun kuchli vositadir. Uning nozikliklarini tushunib, ushbu qo'llanmada muhokama qilingan optimallashtirish usullarini qo'llash orqali siz global auditoriya uchun samarali, qo'llab-quvvatlanadigan va kengaytiriladigan React ilovalarini yaratishingiz mumkin. O'zgarmaslikka ustuvorlik berishni, qimmat hisob-kitoblarni va voqea ishlovchilarini memoizatsiya qilishni, kerak bo'lganda holatni kichikroq qismlarga bo'lishni va murakkab holat logikasi uchun useReducer'dan foydalanishni unutmang. Har doim ilovangizning global kontekstini yodda tuting, i18n, l10n, RTL maketlari, vaqt mintaqalari va maxsus imkoniyatlarni hisobga oling. Ushbu eng yaxshi amaliyotlarga rioya qilish orqali siz React ilovalaringiz nafaqat tez va samarali, balki butun dunyodagi foydalanuvchilar uchun qulay va foydalanishga yaroqli bo'lishini ta'minlay olasiz.

Qo'shimcha O'rganish

• React Hujjatlari: https://reactjs.org/docs/hooks-state.html
• useReducer Hook'i: https://reactjs.org/docs/hooks-reference.html#usereducer
• useMemo Hook'i: https://reactjs.org/docs/hooks-reference.html#usememo
• useCallback Hook'i: https://reactjs.org/docs/hooks-reference.html#usecallback
• React.memo: https://reactjs.org/docs/react-api.html#reactmemo